<template>
  <div class="container">
    <!-- 标签栏 -->
    <div class="tabs">
      <div class="tab" :class="{ active: activeTab === 'ability' }" @click="switchTab('ability')">能力榜</div>
      <div class="tab" :class="{ active: activeTab === 'activity' }" @click="switchTab('activity')">活跃榜</div>
    </div>
    
    <!-- 时间选择标签 -->
    <div class="time-tabs">
      <div class="time-tab" :class="{ active: activeTime === 'day' }" @click="switchTime('day')">日榜</div>
      <div class="time-tab" :class="{ active: activeTime === 'week' }" @click="switchTime('week')">周榜</div>
      <div class="time-tab" :class="{ active: activeTime === 'month' }" @click="switchTime('month')">月榜</div>
    </div>
    
    <!-- 榜单内容 -->
    <div class="ranking-board">
      <!-- 前三名展示 -->
      <div class="top-list" v-if="rankingData.length > 0">
        <!-- 第一名 -->
        <div class="top-item top-1" @click="navigateToUser(rankingData[0]?.id)">
          <div class="top-icon"></div>
          <div class="user-avatar">
            <img class="avatar" :src="getAvatarUrl(rankingData[0]?.avatar)" alt="" />
          </div>
          <div class="user-info">
            <div class="user-name">{{ rankingData[0]?.name }}</div>
            <div class="user-score">
              <div>计划完成率: {{ rankingData[0]?.planCompletionRate }}%</div>
              <div>更新时间: {{ formatDate(rankingData[0]?.updatedAt) }}</div>
            </div>
          </div>
        </div>
        
        <!-- 第二名 -->
        <div class="top-item top-2" @click="navigateToUser(rankingData[1]?.id)">
          <div class="top-icon"></div>
          <div class="user-avatar">
            <img class="avatar" :src="getAvatarUrl(rankingData[1]?.avatar)" alt="" />
          </div>
          <div class="user-info">
            <div class="user-name">{{ rankingData[1]?.name }}</div>
            <div class="user-score">
              <div>计划完成率: {{ rankingData[1]?.planCompletionRate }}%</div>
              <div>更新时间: {{ formatDate(rankingData[1]?.updatedAt) }}</div>
            </div>
          </div>
        </div>
        
        <!-- 第三名 -->
        <div class="top-item top-3" @click="navigateToUser(rankingData[2]?.id)">
          <div class="top-icon"></div>
          <div class="user-avatar">
            <img class="avatar" :src="getAvatarUrl(rankingData[2]?.avatar)" alt="" />
          </div>
          <div class="user-info">
            <div class="user-name">{{ rankingData[2]?.name }}</div>
            <div class="user-score">
              <div>计划完成率: {{ rankingData[2]?.planCompletionRate }}%</div>
              <div>更新时间: {{ formatDate(rankingData[2]?.updatedAt) }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div v-else>
        <p>加载中...</p>
      </div>
    </div>
    
    <!-- 普通排名展示 -->
    <div class="regular-list" v-if="rankingData.length > 3">
      <div class="list-item" v-for="(item, index) in rankingData.slice(3)" :key="item.id" @click="navigateToUser(item.id)">
        <div class="rank-number">{{ index + 4 }}</div>
        <div class="rank-user">
          <div class="rank-avatar">
            <img class="avatar" :src="getAvatarUrl(item.avatar)" alt="" />
          </div>
          <div class="rank-name">{{ item.name }}</div>
        </div>
        <div class="rank-stats">
          <div>发帖数: {{ item.postsCount }}</div>
          <div>视频学习时长: {{ formatDuration(item.videoLearningDuration) }}</div>
          <div>软件使用时长: {{ formatDuration(item.softwareUsageDuration) }}</div>
          <div>计划完成率: {{ item.planCompletionRate }}%</div>
          <div>更新时间: {{ formatDate(item.updatedAt) }}</div>
        </div>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div 
        class="bottom-nav-item" 
        :class="{'active': tabIndex === 0}" 
        @click="navigateToHome"
      >
        <div class="nav-icon">🏠</div>
        <div class="nav-text">首页</div>
      </div>
      <div 
        class="bottom-nav-item" 
        :class="{'active': tabIndex === 1}" 
        @click="navigateToProfile"
      >
        <div class="nav-icon">👤</div>
        <div class="nav-text">我的</div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入接口请求函数
import { getTopTalents } from '@/api/api.js';

export default {
  data() {
    return {
      activeTab: 'activity', // 默认选中活跃榜
      activeTime: 'week',    // 默认选中周榜
      rankingData: [],       // 排行榜数据
      tabIndex: 1,           // 默认选中"我的"标签
      defaultAvatar: '' // 默认头像
    };
  },
  created() {
    // 页面创建时获取排行榜数据
    this.fetchRankingData();
  },
  methods: {
    // 获取排行榜数据
    async fetchRankingData() {
      try {
        // 显示加载状态
        this.rankingData = [];
        
        // 调用接口获取数据
        const response = await getTopTalents({
          tab: this.activeTab,
          time: this.activeTime
        });
        
        // 将获取到的数据存储到 rankingData
        this.rankingData = response.data;
      } catch (error) {
        console.error('获取排行榜数据失败:', error);
        // 处理错误，例如显示错误提示
        // alert('获取排行榜数据失败，请稍后再试');
      }
    },
    // 切换标签
    switchTab(tab) {
      this.activeTab = tab;
      this.fetchRankingData();
    },
    // 切换时间范围
    switchTime(time) {
      this.activeTime = time;
      this.fetchRankingData();
    },
    // 获取头像URL
    getAvatarUrl(avatar) {
      return `https://via.placeholder.com/150?text=${avatar}`;
    },
    // 格式化日期
    formatDate(dateString) {
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    // 格式化时长（秒转分钟）
    formatDuration(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds} 分钟`;
    },
    // 跳转到用户页面
    navigateToUser(userId) {
		console.log(userId)
      uni.navigateTo({
        url: `/pages/index/business/user?id=${userId}`
      });
    },
    navigateToHome() {
      this.tabIndex = 0;
    },
    navigateToProfile() {
      this.tabIndex = 1;
      uni.navigateTo({
        url: '/pages/index/business/mine'
      });
    }
  }
};
</script>

<style scoped>
/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 整体布局 */
.container {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  max-width: 414px;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* 标签栏 */
.tabs {
  display: flex;
  padding: 0 10px;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
}

.tab {
  padding: 10px 0;
  font-size: 16px;
  flex: 1;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.tab.active {
  color: #ff7a7a;
  font-weight: 500;
}

.tab.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 2px;
  background-color: #ff7a7a;
}

/* 榜单时间选择 */
.time-tabs {
  display: flex;
  padding: 10px;
  background-color: #fff;
  justify-content: center;
  align-items: center;
}

.time-tab {
  padding: 5px 15px;
  font-size: 14px;
  margin: 0 5px;
  border-radius: 20px;
  color: #333;
  cursor: pointer;
}

.time-tab.active {
  background-color: #f8d4e2;
  color: #ff7a7a;
}

/* 榜单内容 */
.ranking-board {
  background: linear-gradient(to bottom, #6f8bf8, #7b91ff);
  border-radius: 10px 10px 0 0;
  padding: 15px;
  color: white;
  position: relative;
  padding-top: 50px;
}

/* 前三名展示 */
.top-list {
  display: flex;
  justify-content: space-around;
  position: relative;
}

.top-item {
  text-align: center;
  width: 30%;
  position: relative;
  cursor: pointer;
}

.top-icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-weight: bold;
  font-size: 24px;
  z-index: 100;
}

.top-1 .top-icon {
  font-size: 50px;
}

.top-2 .top-icon {
  font-size: 36px;
}

.top-3 .top-icon {
  font-size: 30px;
}

.top-1 .top-icon:before {
  content: '1';
  display: block;
  text-align: center;
  background-color: gold;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.top-2 .top-icon:before {
  content: '2';
  display: block;
  text-align: center;
  background-color: silver;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.top-3 .top-icon:before {
  content: '3';
  display: block;
  text-align: center;
  background-color: #cd7f32;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ddd;
  margin-bottom: 10px;
  border: 3px solid white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.user-info {
  text-align: center;
}

.user-name {
  font-size: 14px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-score {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 5px;
}

.user-score div {
  margin: 3px 0;
}

/* 普通排名展示 */
.regular-list {
  background-color: white;
  border-radius: 0 0 10px 10px;
  margin-top: -20px;
  padding: 20px 15px;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.rank-number {
  width: 30px;
  font-weight: bold;
  font-size: 16px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-user {
  display: flex;
  align-items: center;
  flex: 1;
}

.rank-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ddd;
  margin-right: 10px;
}

.rank-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-stats {
  font-size: 12px;
  color: #666;
  margin-left: 10px;
  text-align: left;
  width: 60%;
}

.rank-stats div {
  margin: 2px 0;
}

/* 底部导航 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  display: flex;
  border-top: 1px solid #eee;
}

.bottom-nav-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
}

.nav-icon {
  display: block;
  font-size: 20px;
  margin-bottom: 3px;
}

.nav-text {
  color: #666;
}

.bottom-nav-item.active .nav-text {
  color: #5ac8fa;
}

.bottom-nav-item.active .nav-icon {
  color: #5ac8fa;
}
</style>